import React from 'react';
import { Box, LoadingPlaceholder, MainButton, SimpleAccordion, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { FiberRouters } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { GlowingConnectionStatus } from './ConnectionStatus';
import { GetHelpButtons } from './GetHelpButtons';

type RouterInfoProps = {
  color: string;
  routers: FiberRouters[];
  isLoading: boolean;
};

export const RouterInfo = ({ color, routers, isLoading }: RouterInfoProps) => {
  const { t } = useTranslation('fiber');

  if (isLoading) {
    return (
      <Box padding={{ sm: 1, md: 3 }}>
        <Box marginBottom={2}>
          <LoadingPlaceholder width="5/12" height={4} />
        </Box>
        <Box>
          <LoadingPlaceholder width="100%" height={12} />
        </Box>
      </Box>
    );
  }

  return (
    <Box paddingX={9}>
      <Box
        display="flex"
        justifyContent="space-between"
        flexDirection={{ sm: 'column', md: 'row' }}
        marginBottom={4}
        borderColor="grey200"
        borderWidth="1px"
        borderBottomStyle="solid"
      >
        <Box width={{ sm: '100%', md: '8/12' }}>
          <Box marginBottom={2}>
            {routers?.map((router) => {
              return (
                <Box display="flex" flexDirection="row" gap={3} key={router?.macAddress}>
                  <Box>
                    <Text variant="eyebrowMedium">{t('betaAccordion.mac')}</Text>
                    <Text variant="pMediumRegular" color="black100">
                      {router?.macAddress}
                    </Text>
                  </Box>
                  <Box>
                    <Text variant="eyebrowMedium">{t('betaAccordion.ip')}</Text>
                    <Text variant="pMediumRegular" color="black100">
                      {router?.ipAddress}
                    </Text>
                  </Box>
                </Box>
              );
            })}
          </Box>
          <Box marginBottom={4}>
            <Text variant="eyebrowMedium">{t('betaAccordion.wan')}</Text>
            <Text variant="pMediumRegular" color="black100">
              {t('routerStatus.troubleShooting.insturction')}
            </Text>
          </Box>
        </Box>
      </Box>
      <>
        <Box marginBottom={1}>
          <Box marginBottom={2}>
            <Text variant="pLargeBold">{t('routerStatus.actions.title')}</Text>
          </Box>
          <Box display="flex" flexDirection={{ sm: 'column', md: 'row' }}>
            <Box width="100%" marginBottom={2}>
              <MainButton
                colorScheme={'white'}
                text={t('routerStatus.actions.routerLogin')}
                dottedShadow="none"
                renderAs="a"
                icon="longArrowRight"
                href={`http://${routers[0]?.ipAddress}`}
                openInNewTab
              />
            </Box>
          </Box>
        </Box>
        <Box marginBottom={6}>
          <Box borderColor="grey200" borderWidth="1px" borderBottomStyle="solid">
            <Box marginY={2}>
              <SimpleAccordion title={t('betaAccordion.power')} color={color as MainColorType}>
                <Box
                  display="flex"
                  gap={1}
                  flexDirection="column"
                  paddingX={[3, 3, 8]}
                  paddingBottom={3}
                >
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.power.on.title')}
                    description={t('routerStatus.simpleAccordion.power.on.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.power.off.title')}
                    description={t('routerStatus.simpleAccordion.power.off.description')}
                  />
                </Box>
              </SimpleAccordion>
            </Box>
            <Box marginY={2}>
              <SimpleAccordion title={t('betaAccordion.wanTitle')} color={color as MainColorType}>
                <Box
                  display="flex"
                  gap={1}
                  flexDirection="column"
                  paddingX={[3, 3, 8]}
                  paddingBottom={3}
                >
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.wan.on.title')}
                    description={t('routerStatus.simpleAccordion.wan.on.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.wan.off.title')}
                    description={t('routerStatus.simpleAccordion.wan.off.description')}
                  />
                </Box>
              </SimpleAccordion>
            </Box>
            <Box marginY={2}>
              <SimpleAccordion title={t('betaAccordion.internet')} color={color as MainColorType}>
                <Box
                  display="flex"
                  gap={1}
                  flexDirection="column"
                  paddingX={[3, 3, 8]}
                  paddingBottom={3}
                >
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.internet.on.title')}
                    description={t('routerStatus.simpleAccordion.internet.on.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.internet.off.title')}
                    description={t('routerStatus.simpleAccordion.internet.off.description')}
                  />
                </Box>
              </SimpleAccordion>
            </Box>
            <Box marginY={2}>
              <SimpleAccordion title={t('betaAccordion.wlan')} color={color as MainColorType}>
                <Box
                  display="flex"
                  gap={1}
                  flexDirection="column"
                  paddingX={[3, 3, 8]}
                  paddingBottom={3}
                >
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.wlan.on.title')}
                    description={t('routerStatus.simpleAccordion.wlan.on.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.wlan.blinking.title')}
                    description={t('routerStatus.simpleAccordion.wlan.blinking.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.wlan.off.title')}
                    description={t('routerStatus.simpleAccordion.wlan.off.description')}
                  />
                </Box>
              </SimpleAccordion>
            </Box>
            <Box marginBottom={4} marginTop={2}>
              <SimpleAccordion title={t('betaAccordion.lan')} color={color as MainColorType}>
                <Box
                  display="flex"
                  gap={1}
                  flexDirection="column"
                  paddingX={[3, 3, 8]}
                  paddingBottom={3}
                >
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.lan.on.title')}
                    description={t('routerStatus.simpleAccordion.lan.on.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.lan.blinking.title')}
                    description={t('routerStatus.simpleAccordion.lan.blinking.description')}
                    isConnected
                  />
                  <GlowingConnectionStatus
                    title={t('routerStatus.simpleAccordion.lan.off.title')}
                    description={t('routerStatus.simpleAccordion.lan.off.description')}
                  />
                </Box>
              </SimpleAccordion>
            </Box>
          </Box>
        </Box>
      </>
      <Box marginBottom={4}>
        <GetHelpButtons
          color={color as MainColorType}
          href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
        />
      </Box>
    </Box>
  );
};